<template>
	<view class="my_stepper addcart">
		<view v-show="value != 0" class="btn" @click.stop="minus">
			<image class="icon" src="/static/image/sub.png" mode=""></image>
		</view>
		<view v-show="value != 0" @click.stop="showkey" class="input_box align_center">
			<view class="num">{{value?value:''}}</view>
			<!-- <input class="input_value bold" :id="index" type="number" v-model="value" disabled="true" /> -->
		</view>
		<view class="btn" style="width: 55rpx; height: 55rpx;" @click.stop="plus">
			<image class="icon" v-if="value != 0" src="/static/images/jiahao.svg" mode=""></image>
			<image class="icon" v-else src="/static/images/gouwuche.svg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['val', 'min', 'limit', 'index', 'inventory'],
		data() {
			return {
				value: this.val
			};
		},
		watch: {
			val(newval) {
				this.value = newval;
			}
		},
		methods: {
			minus() {
				var val = Number(this.value);
				this.$emit('minus', {
					index: this.index,
					value: val,
					min: this.min,
					inventory: this.inventory,
					limit: this.limit
				});
			},
			plus() {
				var val = Number(this.value),
        inventory = Number(this.inventory);
				this.$emit('plus', {
					index: this.index,
					value: val,
					min: this.min,
					inventory: this.inventory,
					limit: this.limit
				});
			},
			showkey() {
				this.$emit('showKey')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.my_stepper {
		display: flex;
		align-items: center;

		.btn {
			width: 55rpx;
			height: 55rpx;
			// box-sizing: initial;
			// border-radius: 50%;
			// font-weight: bold;
			// line-height: 40rpx;
			// text-align: center;
			.icon {
				width: 100%;
				height: 100%;
			}
		}

		.input_box {
			// height: 40rpx;
			// background:#fff;
			margin: 0 8rpx;

			.num {
				text-align: center;
				min-width: 60rpx;
				font-weight: bold;
				color: #303133;
			}
		}
	}

	// .my_stepper .input_value {
	// 	width: 80rpx;
	// 	height: initial;
	// 	text-align: center;
	// }

	// @media(min-width:800px) {

	// 	.minus,
	// 	.plus {
	// 		width: 40px !important;
	// 		height: 40px !important;
	// 	}

	// 	.minus {
	// 		line-height: 36px !important;
	// 	}

	// 	.plus {
	// 		line-height: 38px !important;
	// 	}

	// }
</style>
